//
//  CycleCalendarNotifyView.swift
//  Kosspot
//
//  Created by 李鑫 on 2025/7/22.
//

import SwiftUI

struct CycleCalendarNotifyView: View {
    @EnvironmentObject var appState: AppState
    @State var slqtx : Bool = false
    @State var plqtx : Bool = false
    @State var plrqtx : Bool = false
    @State var pljstx : Bool = false
    @State private var showPicker = false
    @State private var selectedDate = Date()
    
    var body: some View {
        VStack {
            CustomNavigationBar(rightImageName: nil, title: "通知提醒") {}
            ScrollView(.vertical,showsIndicators: false) {
                HStack {
                    VStack(alignment: .leading, spacing: 8) {
                        Text("生理期提醒")
                            .font(.system(size: 16))
                            .foregroundStyle(.white)
                        Text("手表会在预测生理期开始前一天提醒您。")
                            .font(.system(size: 14))
                            .foregroundStyle(Color(hex: "#B1B1B1"))
                    }
                    .padding(.leading,16)
                    Spacer()
                    Toggle("", isOn: $slqtx)
                        .toggleStyle(SwitchToggleStyle(tint: Color(hex: "#F352BD")))
                        .frame(width: 47,height: 27)
                        .padding(.trailing,16)
                }
                .frame(height: 70)
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16)
                .padding(.horizontal,12)
                .padding(.top,12)
                
                Spacer().frame(height: 12)
                HStack {
                    VStack(alignment: .leading, spacing: 8) {
                        Text("排卵提醒")
                            .font(.system(size: 16))
                            .foregroundStyle(.white)
                        Text("手表会在排卵期开始前一天提醒您。")
                            .font(.system(size: 14))
                            .foregroundStyle(Color(hex: "#B1B1B1"))
                    }
                    .padding(.leading,16)
                    Spacer()
                    Toggle("", isOn: $plqtx)
                        .toggleStyle(SwitchToggleStyle(tint: Color(hex: "#F352BD")))
                        .frame(width: 47,height: 27)
                        .padding(.trailing,16)
                }
                .frame(height: 70)
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16)
                .padding(.horizontal,12)
                
                Spacer().frame(height: 12)
                HStack {
                    VStack(alignment: .leading, spacing: 8) {
                        Text("排卵日提醒")
                            .font(.system(size: 16))
                            .foregroundStyle(.white)
                        Text("手表会在排卵高峰开始前一天提醒您。")
                            .font(.system(size: 14))
                            .foregroundStyle(Color(hex: "#B1B1B1"))
                    }
                    .padding(.leading,16)
                    Spacer()
                    Toggle("", isOn: $plrqtx)
                        .toggleStyle(SwitchToggleStyle(tint: Color(hex: "#F352BD")))
                        .frame(width: 47,height: 27)
                        .padding(.trailing,16)
                }
                .frame(height: 70)
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16)
                .padding(.horizontal,12)

                Spacer().frame(height: 12)
                HStack {
                    VStack(alignment: .leading, spacing: 8) {
                        Text("排卵结束提醒")
                            .font(.system(size: 16))
                            .foregroundStyle(.white)
                        Text("当排卵期结束时，手表会提醒您。")
                            .font(.system(size: 14))
                            .foregroundStyle(Color(hex: "#B1B1B1"))
                    }
                    .padding(.leading,16)
                    Spacer()
                    Toggle("", isOn: $pljstx)
                        .toggleStyle(SwitchToggleStyle(tint: Color(hex: "#F352BD")))
                        .frame(width: 47,height: 27)
                        .padding(.trailing,16)
                }
                .frame(height: 70)
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16)
                .padding(.horizontal,12)
                
                
                Spacer().frame(height: 12)
                HStack {
                    VStack(alignment: .leading, spacing: 8) {
                        Text("提醒时间")
                            .font(.system(size: 16))
                            .foregroundStyle(.white)
                        Text("将在指定时间提醒您。")
                            .font(.system(size: 14))
                            .foregroundStyle(Color(hex: "#B1B1B1"))
                    }
                    .padding(.leading,16)
                    Spacer()
                    Text(selectedDate.toString(style: .HMOnly))
                        .font(.system(size: 14))
                        .foregroundStyle(.white)
                    Image("you")
                        .resizable()
                        .frame(width: 16,height: 16)
                        .padding(.trailing,16)
                        .onTapGesture {
                            showPicker = true
                        }
                        .CustomPickerSheet(
                            isPresented: $showPicker,
                            selectedDate: $selectedDate,
                            config: CustomPickerConfig(
                                title: "选择提醒时间",
                                components: [.hourAndMinute]
                            )
                        )
                }
                .frame(height: 70)
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16)
                .padding(.horizontal,12)
                
                
                Spacer().frame(height: 20)
                HStack {
                    Text("开启后，支持生理周期功能的穿戴设备在对应时间收到提醒。")
                        .font(.system(size: 12))
                        .foregroundStyle(Color(hex: "#999999"))
                        .padding(.leading,16)
                }
                .frame(height: 20)
                .background(.clear)
                .padding(.horizontal,12)
                
                
                
                
                
                
            }
            Spacer()
        }
        .navigationBarHidden(true)
        .background(Color(hex: "#0A0A0A"))
        .edgesIgnoringSafeArea(.all)
    }
}

#Preview {
    CycleCalendarNotifyView()
}
